<template>
  <div ref="chart1" :style="{ width: '100%', height: '535px' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { reqPieAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any

let legend = ref([])
let Data = ref([])

const init = async () => {
  let res = await reqPieAPI()
  legend.value = res.result.legend
  Data.value = res.result.data
}
onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      backgroundColor: '#013954',
      tooltip: {
        trigger: 'item',
        formatter: '市值占比 <br/>{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 20,
        top: 20,
        data: legend.value,
        textStyle: {
          color: '#fff',
        },
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: Data.value,
          roseType: 'radius',
          label: {
            color: '#fff',
          },
          labelLine: {
            lineStyle: {
              color: '#888',
            },
          },
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = ['#00ffcc', '#388df6']
                return colorList[params.dataIndex % colorList.length]
              },
            },
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200
          },
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style></style>
